<template>
  <div style="margin-left: 100px; margin-right: 120px">
    <div class="step">
      <!-- 进度条 -->
      <el-steps :active="active" finish-status="success">
        <el-step title="认证"></el-step>
        <el-step title="发布信息"></el-step>
        <el-step title="审核"></el-step>
      </el-steps>
      <el-button style="margin-top: 12px" @click="previous">上一步</el-button>
      <el-button style="margin-top: 12px" @click="next">下一步</el-button>
    </div>
    <!-- <p style="margin-left: 20vw; color: red; margin-top: 2vh">带*的为必选项</p> -->
    <!-- 发布信息表单 -->
    <div class="Certification_Form">
      <el-form ref="form" :model="form" label-width="130px">
        <el-form-item label="收件人身份证号">
          <el-input v-model="form.idNumber"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="学生所处学段">
          <!-- <el-cascader
            v-model="form.learningSection"
            :options="options"
            clearable
          ></el-cascader> -->
           <el-select v-model="form.learningSection" placeholder="请选择学段">
            <el-option label="小学" value="小学"></el-option>
            <el-option label="初中" value="初中"></el-option>
            <el-option label="高中" value="高中"></el-option>
            <el-option label="大学" value="大学"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学校">
          <el-input v-model="form.school"></el-input>
        </el-form-item>
        <el-form-item label="卡号">
          <el-input v-model="form.accountNumber"></el-input>
        </el-form-item>
        <el-form-item label="收款地址">
          <el-select v-model="form.receivingAddress" placeholder="请选择地区">
            <el-option label="盘龙区" value="盘龙区"></el-option>
            <el-option label="五华区" value="五华区"></el-option>
            <el-option label="呈贡区" value="呈贡区"></el-option>
            <el-option label="西山区" value="西山区"></el-option>
            <el-option label="官渡区" value="官渡区"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标金额">
          <el-input v-model="form.targetMoney"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-select
            v-model="form.politicalOutlook"
            placeholder="请选择政治面貌"
          >
            <el-option label="中共党员" value="中共党员"></el-option>
            <el-option label="中共预备党员" value="中共预备党员"></el-option>
            <el-option label="共青团员" value="共青团员"></el-option>
            <el-option label="民革会员" value="民革会员"></el-option>
            <el-option label="民盟盟员" value="民盟盟员"></el-option>
            <el-option label="民建会员" value="民建会员"></el-option>
            <el-option label="民进会员" value="民进会员"></el-option>
            <el-option label="农工党党员" value="农工党党员"></el-option>
            <el-option label="致公党党员" value="致公党党员"></el-option>
            <el-option label="九三学社社员" value="九三学社社员"></el-option>
            <el-option label="台盟盟员" value="台盟盟员"></el-option>
            <el-option label="无党派人士" value="无党派人士"></el-option>
            <el-option label="群众(普通居民)" value="群众(普通居民)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-input type="data"  v-model="form.birthday"></el-input>
        </el-form-item>
        <el-form-item
          label="年龄"
          prop="age"
          :rules="[{ type: 'number', message: '年龄必须为数字值' }]"
        >
          <el-input
            type="age"
            v-model.number="form.age"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="toRouter('/charity/infocharity')"
            style="margin-top: 20px"
            >提交申请</el-button
          >
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { PublishInformation } from "network/charity.js";
export default {
  data() {
    return {
      active: 1,
      form: {
        idNumber: "",
        name: "",
        learningSection: "",
        school: "",
        accountNumber: "",
        receivingAddress: "",
        targetMoney: "",
        politicalOutLook: "",
        birthday: "",
        age: ""
      },
      options: [
        {
          value: "xioaxue",
          label: "小学",
          children: [
            {
              value: "yinianji",
              label: "一年级",
            },
            {
              value: "ernianji",
              label: "二年级",
            },
            {
              value: "sannianji",
              label: "三年级",
            },
            {
              value: "sinianji",
              label: "四年级",
            },
            {
              value: "wunianji",
              label: "五年级",
            },
            {
              value: "liunianji",
              label: "六年级",
            },
          ],
        },
        {
          value: "chuzhong",
          label: "初中",
          children: [
            {
              value: "chuyi",
              label: "初一",
            },
            {
              value: "chuer",
              label: "初二",
            },
            {
              value: "chusan",
              label: "初三",
            },
          ],
        },
        {
          value: "gaozhong",
          label: "高中",
          children: [
            {
              value: "gaoyi",
              label: "高一",
            },
            {
              value: "gaoer",
              label: "高二",
            },
            {
              value: "gaosan",
              label: "高三",
            },
          ],
        },
        {
          value: "daxue",
          label: "大学",
          children: [
            {
              value: "dayi",
              label: "大一",
            },
            {
              value: "daer",
              label: "大二",
            },
            {
              value: "dasan",
              label: "大三",
            },
            {
              value: "dasi",
              label: "大四",
            },
          ],
        },
        {
          value: "qita",
          label: "其他",
        },
      ],
    };
  },

  methods: {
    onSubmit() {
      //提交表单，信息存入数据库中，跳转到信息表单生成页面，
      //暂时不与后台交互，直接跳转
    },
    //路由跳转
    toRouter(path) {
      this.$router.push(path);
      this.publishInformation();
    },
    //返回上一步
    previous() {
      this.active = this.active--;
      if (this.active-- < 0) return;
    },
    //下一步
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    publishInformation() {
      PublishInformation(
       this.form
      ).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
<style >
.step {
  margin-right: 50px;
  border: 2px solid gray;
  padding: 10px;
  border-radius: 5px;
  background-color: rgb(236, 196, 163);
}
.el-input__inner {
  width: 20vw;
}
.Certification_Form {
  width: 500px;
  height: 800px;
  border: 1px solid black;
  margin-left: 250px;
  margin-top: 2vh;
  padding-top: 2vh;
}
</style>
